<!-- vue-zhu/src/login/components/sign_in.vue -->
<template>
    <div class="form-section">
      <h2>登录账号</h2>
      <div class="input-container">
        <span class="for-icon">
          <i class="fas fa-user"></i>
        </span>
        <input type="text" class="input-field" placeholder="账号/手机号/邮箱" v-model="username">
      </div>
      <div class="input-container">
        <span class="for-icon">
          <i class="fas fa-lock"></i>
        </span>
        <input type="password" class="input-field" placeholder="密码" v-model="password">
      </div>
      <div class="input-container">
        <span class="for-icon">
          <i class="fas fa-user-tag"></i>
        </span>
        <select id="type-select" v-model="userType" class="input-field">
          <option value="" disabled selected>用户类型</option>
          <option value="卖家">卖家</option>
          <option value="买家">买家</option>
          <option value="管理员">管理员</option>
        </select>
      </div>
      <div class="options-row">
        <div class="remember-me">
          <input type="checkbox" id="remember" v-model="rememberMe">
          <label for="remember">记住我</label>
        </div>
        <a href="#" class="forgot-password">忘记密码?</a>
      </div>
      <button class="login-button" @click="login">登录</button>
      <div class="social-login">
        <p>或通过社交账号登录</p>
        <div class="social-icons">
          <div class="social-icon">
            <i class="fab fa-qq"></i>
          </div>
          <div class="social-icon">
            <i class="fab fa-weixin"></i>
          </div>
          <div class="social-icon">
            <i class="fab fa-weibo"></i>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SignIn',
    data() {
      return {
        username: '',
        password: '',
        userType: '未登录',
        rememberMe: false
      }
    },
    methods: {
      login() {
        console.log('登录信息:', {
          username: this.username,
          password: this.password,
          userType: this.userType,
          rememberMe: this.rememberMe
        });
        // 从 localStorage 获取注册信息
        const storedUserInfo = JSON.parse(localStorage.getItem('userInfo'));
        // 验证用户信息，支持用户名、邮箱和手机号登录
        if (storedUserInfo && 
            (storedUserInfo.username === this.username || 
            storedUserInfo.email === this.username || 
            storedUserInfo.phone === this.username) && 
            storedUserInfo.password === this.password && 
            storedUserInfo.userType === this.userType) {
          localStorage.setItem('loggedInUserType', this.userType); // 存储用户类型到单独的键
          this.$router.push('/index'); // 跳转到 /index 页面
        } else {
          alert('账号或密码错误');
        }
      }
    }
  }
  </script>
  
  <style scoped>
  @import '@/assets/css/login.css';
  </style>